<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router'; // 引入 useRouter 钩子
import axios from 'axios';

const router = useRouter(); // 获取 router 实例

// 创建响应式数据
const username = ref('');
const password = ref('');

// 登录按钮点击事件
const login = async () => {
  try {
    // 构建传递给后端的参数
    const payload = {
      username: username.value,
      password: password.value,
      image: '',
      phone: '',
      state: false
    };

    // 发起 POST 请求并传递 JSON 数据
    const response = await axios.post('http://localhost:8080/user/login', payload);

    // 判断登录是否成功
    if (response.data.code === 1) {
      alert('登录成功！');
      // 登录成功后跳转到 /personal
      router.push('/personal');
    } else {
      alert('登录失败: ' + response.data.msg);
    }
  } catch (error) {
    alert('登录请求出错，请稍后重试。');
    console.error('登录请求出错', error);
  }
};
</script>

<template>
  <body>
  <div class="head"></div>
  <div class="container">
    <div class="login-box">
      <span class="title">CSDN登录</span>
      <input
          type="text"
          id="username"
          name="username"
          v-model="username"
          placeholder="手机号码/用户名/邮箱"
      >
      <input
          type="password"
          id="password"
          name="password"
          v-model="password"
          placeholder="输入密码"
      >
      <div class="options">
        <input
            type="checkbox"
            id="remember"
            class="remember"
            v-model="remember"
        >
        <label for="remember">
          <span class="remember-text">下次自动登录</span>
        </label>
        <a class="forget-pwd">忘记密码？</a>
      </div>
      <button @click="login" class="login-button">登录</button>
      <hr>
      <span class="register">
          还没有账号？
          <router-link to="/register">立即注册</router-link>
        </span>
    </div>
  </div>
  </body>
</template>



<style scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.login-box {
  /* 这里可以添加一些样式调整 */
}

.login-button {
  margin-top: 10px;
  padding: 10px;
  width: 100%;
  background-color: #4CAF50;
  color: white;
  border: none;
  cursor: pointer;
}

.login-button:hover {
  background-color: #45a049;
}
body {
  font-family: "HarmonyOS Sans SC", sans-serif;
  width: 1500px;
  background-color: #121620;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-image: url('../assets/login/bg.png');
  background-size: cover;
}
.head {
  width: 100%;
  background-color: #3e352d;
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.icon img {
  width: 50px;
}
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: calc(100vh - 60px);
  width: 100%;
}
.login-box {
  background-color: rgb(255, 255, 255);
  padding: 40px;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  width: 320px;
  text-align: center;
}
.title {
  font-size: 24px;
  font-weight: bold;
  color: #333;
  margin-bottom: 20px;
}
input[type="text"],
input[type="password"] {
  width: 100%;
  padding: 10px;
  margin: 10px 0;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 5px;
  outline: none;
}
input[type="text"]:focus,
input[type="password"]:focus {
  border-color: #5088C7;
}
.options {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 10px 0;
}
.remember {
  margin-right: 5px;
}
.remember-text {
  font-size: 14px;
  color: #555;
}
.forget-pwd {
  font-size: 14px;
  color: #5088C7;
  text-decoration: none;
}

hr {
  margin: 20px 0;
  border: none;
  border-top: 1px solid #e0e0e0;
}
.register {
  margin-top: 10px;
  font-size: 14px;
  color: #333;
}
.register a {
  color: #5088C7;
  text-decoration: none;
}
.footer a {
  color: #666;
  text-decoration: none;
}
</style>